<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .file-box {
            display: block;
            width: 300px;
            height: 200px;
            background: #ededed;
            position: relative;


        }

        .file-box>input[type=file] {
            display: none;
        }

        .file-box>img {
            width: 100%;
            height: 100%;
        }

        .file-box>span {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: block;
            position: absolute;
            bottom: 0px;
            left: 0px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            color:white;
        }
        .loading > span{
            display: block;
            width:100%;
            height: 30px;
            position: absolute;
            top:45%;
            left:0px;
            border:1px solid white;
            box-sizing: border-box;



        }
        .loading i{
            display: block;
            height: 100%;
            background:lawngreen;
        }
    </style>
</head>

<body>
    <label class="file-box" id="fileBox">
        <input type="file">
        <img src="/upload/upload.png" alt="">
        <span>图片只支持png、jpg、jpeg格式</span>
        <div class="loading">
            <span>
                <i style="width:0%;"></i>
            </span>
        </div>
    </label>
    <input type="button" value="上传图片" onclick="uploadFile()">
    <script>
        let file = null;
        let fileDom = document.querySelector("input[type='file']");
        let imgDom = document.querySelector("img");
        let loadingDom = document.querySelector(".loading");
        let iDom = document.querySelector("i");
        let reg = /\.(png|jpg|jpeg)$/;
        fileDom.addEventListener("change", function () {
            let tempFile = this.files[0];//获取当前选中图片的文件对象
            let flag = reg.test(tempFile.name);
            if (flag) {
                imgDom.src = window.URL.createObjectURL(tempFile);
                file = tempFile;
            } else {
                alert("不支持该文件的上传");
                file = null;
            }

        });

        function uploadFile(){
            if(file==null){
                alert("请选择上传文件");
                return;
            }

            let xhr=new XMLHttpRequest();
            xhr.open("post","/body");
            xhr.onload=function(){
               alert("图片上传成功");
            };

            //上传进度的监控,周期性事件，按照固定时间进行执行，上传进度
            xhr.upload.onprogress=function(e){
                // console.log(e.loaded);//已经完成发送的数据量
                // console.log(e.total);//总数据量
                let percent=(e.loaded/e.total)*100;
                iDom.style.width=percent+"%";
            };
            xhr.onloadend=function(){
                loadingDom.style.display="none";
                iDom.style.width="0%";
            };
            let fd=new FormData();
            fd.append("pic",file)
            xhr.send(fd);
        }
    </script>
</body>

</html>